/*******  TYPOGRAPHY CSS  *******/
body {
	font-family: "Lexend Deca", Noto Sans, Arial, sans-serif;
	font-size: 16px;
	line-height: 18px;
	font-weight: 400;
	color: var(--color-primary-text);
	transition: all .4s ease-in-out;
}

body:lang(ar),
section:lang(ar) {
	direction: rtl;
}

body:lang(ja),
body:lang(ko) {
	font-family: Noto Sans JP, Noto Sans, Arial, sans-serif;
}


/*  HEADERS  */
.headline-mega {
  font-style: normal;
  font-weight: 400;
  font-size: 6rem;
  line-height: 7.5rem;
  letter-spacing: -0.67px;
}


.headline-mega-alternative {
  font-style: normal;
  font-weight: 400;
  font-size: 4rem;
  line-height: 5.5rem;
  letter-spacing: -1.5px;
}

h1,
.headline-one {
  font-style: normal;
  font-weight: 400;
  font-size: 3rem;
  line-height: 3.5rem;
  letter-spacing: -1px;
}

.headline-one-alternative {
  font-style: normal;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3.0rem;
  letter-spacing: -0.5px;
}



h2,
.headline-two {
  font-style: normal;
  font-weight: 400;
  font-size: 3rem;
  line-height: 3.5rem;
  letter-spacing: -0.5px;
}

.headline-two-alternative {
  font-style: normal;
  font-weight: 400;
  font-size: 3.5rem;
  line-height: 4rem;
  letter-spacing: -1px;
}



h3,
.headline-three {
  font-style: normal;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3rem;
}

.headline-three-alternative {
  font-style: normal;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3rem;
  letter-spacing: -0.5px;
}



h4,
.headline-four {
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2rem;
}

.headline-four-alternative {
  font-style: normal;
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.5rem;
}

h5,
.headline-five {
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

.headline-five-alternative {
  font-style: normal;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

h6,
.headline-six {
  font-style: normal;
  font-weight:900;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.headline-six-alternative {
  font-style: normal;
  font-weight:900;
  font-size: 1.0rem;
  line-height: 1.75rem;
}




.highlight {
  background: var(--color-green-light);
  padding: 5px;

  position: relative;

  white-space: nowrap;
}
.highlight::before {
  content: "\A";
  background: transparent url(highlight_l.svg) no-repeat;
  background-position: top right;
  position: absolute;
  left: -1em;
  top: -0.5em;
  width: 1em;
  height: 2em;
}
.highlight::after{
  content: "\A";
  background: transparent url(highlight_r.svg) no-repeat;
  background-position: bottom left;
  position: absolute;
  right: -1em;
  top: 0px;
  width: 1em;
  height: 2em;
}

.highlight-left,
.highlight-right,
.highlight-middle {
  background: var(--color-green-light);
  padding: 5px;
  position: relative;
  display: inline-block;
}

.highlight-left::before {
  content: "\A";

  background: transparent
    url("data:image/svg+xml,%3Csvg width='12' height='93' viewBox='0 0 12 93' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 23.0682H10.8182V1.25H1V23.0682Z' stroke='%23003C46' stroke-width='1.36778' stroke-linejoin='round'/%3E%3Cpath d='M10.7885 22.6787V92.2382' stroke='%23003C46' stroke-width='1.36778' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
    no-repeat;
  position: absolute;
background-position: top right;
  left: -1em;
  top: -0.5em;
  width: 1em;
  height: 2em;
}

.highlight-right::after {
  content: "\A";

  background: transparent
    url("data:image/svg+xml,%3Csvg width='13' height='93' viewBox='0 0 13 93' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.54492 92.159H11.3631V70.3408H1.54492V92.159Z' stroke='%23003C46' stroke-width='1.36778' stroke-linejoin='round'/%3E%3Cpath d='M1.54545 73.6133V0.522461' stroke='%23003C46' stroke-width='1.36778' stroke-linejoin='round'/%3E%3C/svg%3E ")
    no-repeat;
  background-position: bottom left;
  position: absolute;
  right: -1em;
  top: 0px;
  width: 1em;
  height: 2em;
}

.highlight-alt {
  background: var(--color-green-light);
  padding: 5px 0.25em;
}

h1:has(span.highlight),
h1:has(span.highlight-left) {
	line-height: 1.2;
}



/* Keylines */
.keyline {
  position: relative;
  margin-top: 40px;
}

.keyline::before {
  content: "";
  width: 70px;
  height: 2px;
  position: absolute;
  top: -30px;
}

.keyline-green::before {
  background: var(--color-green-light);
}
.keyline-white::before {
  background: var(--color-white);
}
.keyline-petrol::before {
  background: var(--color-petrol);
}
.keyline-blue::before {
  background: var(--color-blue-50);
}
.keyline-grey::before {
  background: #c4c4c4;
}

/*  LINKS & TEXT COLOR OVERRIDES */
main a:link { color: var(--color-petrol); text-decoration: none; border-bottom: 2px solid var(--color-petrol); }
main a:visited { color: var(--color-petrol); text-decoration: none; border-bottom: 2px solid var(--color-petrol); }
main a:hover { color: var(--color-petrol); text-decoration: none; border-bottom: 2px solid var(--color-green-light); }
main a:active { color: var(--color-petrol); text-decoration: none; border-bottom: 2px solid var(--color-blue);}



main .brand-color-background-petrol,
main .brand-color-background-blue { color: var(--color-white); }
main .brand-color-background-petrol a:link,
main .brand-color-background-blue a:link { color: var(--color-petrol-30b); text-decoration: none; border-bottom: 2px solid var(--color-petrol-30b); }
main .brand-color-background-petrol a:visited,
main .brand-color-background-blue a:visited { color: var(--color-white); text-decoration: none; border-bottom: 2px solid var(--color-purple-light); }
main .brand-color-background-petrol a:hover,
main .brand-color-background-blue a:hover { color: var(--color-petrol-30b); text-decoration: none; border-bottom: 2px solid var(--color-green-light); }
main .brand-color-background-petrol a:active,
main .brand-color-background-blue a:active { color: var(--color-petrol-30b); text-decoration: none; border-bottom: 2px solid var(--color-petrol-30b);}



span.ot-pref-opener {text-decoration: none; border-bottom: 2px solid var(--color-petrol); cursor:pointer;}
main span.ot-pref-opener:hover {text-decoration: none; border-bottom: 2px solid var(--color-green-light); }


/*  PARGRAPH TEXT  */
p {
  line-height: 1.5em;
}
p.large {
  font-size: 1.25em;
  line-height: 2rem;
}
p.small {
  font-size: 0.875rem;
  line-height: 1.5rem;
}
p.x-small {
  font-size: 0.625rem;
  line-height: 1rem;
}

.brand-color-background-petrol p {
	color: var(--color-white);
}



sup,
sub {
  line-height: 0;
  font-size: 0.75rem;
}

.footnote {
  font-size: 0.75em;
  text-indent: -6px;
  padding-left: 6px;
  margin: 0;
}

/* LISTS */
ul, ol {}
ul li,
ol li {
    line-height: 1.5em;
	margin-bottom: 1.0em;
}

ul ul,
ul ol,
ol ol,
ol ul { margin-top: 1.0em;}

ul.circle {list-style-type: circle;}
ul.disc {list-style-type: disc;}
ul.square {list-style-type: square;}

ol.armenian {list-style-type: armenian;}
ol.cjk-ideographic {list-style-type: cjk-ideographic;}
ol.decimal {list-style-type: decimal;}
ol.decimal-leading-zero {list-style-type: decimal-leading-zero;}
ol.georgian {list-style-type: georgian;}
ol.hebrew {list-style-type: hebrew;}
ol.hiragana {list-style-type: hiragana;}
ol.hiragana-iroha {list-style-type: hiragana-iroha;}
ol.katakana {list-style-type: katakana;}
ol.katakana-iroha {list-style-type: katakana-iroha;}
ol.lower-alpha {list-style-type: lower-alpha;}
ol.lower-greek {list-style-type: lower-greek;}
ol.lower-latin {list-style-type: lower-latin;}
ol.lower-roman {list-style-type: lower-roman;}
ol.upper-alpha {list-style-type: upper-alpha;}
ol.upper-latin {list-style-type: upper-latin;}
ol.upper-roman {list-style-type: upper-roman;}
ol.none {list-style-type: none;}

/*  STATS   */
div.statistics-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 3em 0;
}
div.stat {
  height: 280px;
  border: solid 0px var(--color-white);
  width: calc(50% - 3em);

  display: inline-block;
  margin: 1em 0;
}





div.stat .stat-primary {
  font-size: 12.0em;
  line-height: 0.875em;
  letter-spacing: -3px;
}

div.stat .stat-secondary {
  font-size: 6.0em;
  color: var(--color-petrol-30);
  letter-spacing: -1px;
}

div.stat .stat-byline {
  font-size: 1em;
  color: var(--color-petrol-30);
  margin: 1em 0 0 0;
  max-width: 75%;
}

@media only screen and (max-width: 768px) {
  div.stat  {
    width: 100%;
    height: auto;
    text-align: center;
  }
  div.stat:not( :has(p)) {
   height: 0;
  }
  div.stat::has(p) {
    height: auto;
   }

   div.stat .stat-byline {
    max-width: 100%;
   }
}

@media only screen and (max-width: 1200px) {
  div.stat .stat-primary {
    font-size: 7em;
  }
}

/*  CHIP  */
.chip {
    background-color: var(--color-grey-10);
    color: var(--color-petrol);
    font-size: 0.75em;
    line-height: 3em;
    border-radius: 10px;
    padding: 4px 10px;
    margin: .5em .75em;
    white-space: nowrap;
}

.chip::after {
    content: "\A";
    white-space: pre;
}



/*  BADGE  */
.badge-blue {
  border-radius: 40px;
  padding: 13px 18px;
  background: var(--color-blue);
  color: white;
}